<template>
    <div class="login">
        <div class="login-form">
            <div class="login-header">
                <img src="../../assets/images/logo.png" width="195" height="48" alt="">
            </div>
            <el-form :model="addForm" status-icon label-position="right" :rules="rules" ref="addForm">
                <el-form-item prop="username">
                    <el-input placeholder="请输入用户名" v-model="addForm.username" autocomplete="off" suffix-icon="fa fa-user"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input placeholder="请输入密码" v-model="addForm.password" autocomplete="off" suffix-icon="fa fa-keyboard-o"></el-input>
                </el-form-item>
                <el-form-item prop="phone">
                    <el-input placeholder="请输入手机号" v-model="addForm.phone" autocomplete="off" suffix-icon="fa fa-phone"></el-input>
                </el-form-item>
                <el-form-item prop="email">
                    <el-input placeholder="请输入邮箱" v-model="addForm.email" autocomplete="off" suffix-icon="fa fa-envelope-o"></el-input>
                </el-form-item>
                <el-form-item prop="gender">
                    <el-select v-model="addForm.gender">
                        <el-option label="女" value="f"></el-option>
                        <el-option label="男" value="m"></el-option>
                    </el-select>
                </el-form-item>
                <el-button type="primary" :loading="loginLoading" style="width: 100%;margin-bottom: 18px" @click.native="register('addForm')">注册
                </el-button>
            </el-form>
        </div>
        <div class="login-form" id="rightDiv">
            <p>使用以下账号直接登录</p>
            <div class="zc qq">QQ注册</div>
            <div class="zc wb">微博注册</div>
            <div class="zc wx">微信注册</div>
            <p>已有账号？
                <router-link to="/login" class="loginBtn">立即登录</router-link>
            </p>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        let checkPhone = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('电话不能为空'));
            }
            setTimeout(() => {
                if (!/^1\d{10}$/.test(value)) {
                    callback(new Error('请输入11位格式正确的电话号码'));
                } else {
                    callback();
                }
            }, 500);
        };
        let checkEmail = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('邮箱不能为空'));
            }
            setTimeout(() => {
                if (!/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(value)) {
                    callback(new Error('请输入格式正确的邮箱'));
                } else {
                    callback();
                }
            }, 500);
        };
        let checkPwd = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('密码不能为空'));
            }
            setTimeout(() => {
                if (!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{6,18}$/.test(value)) {
                    callback(new Error('密码由大写字母+小写字母+数字，6-18位组成！'));
                } else {
                    callback();
                }
            }, 500);
        };
        return {
            Remenber: true,
            loginLoading: false,
            addForm: {
                username: '',
                password: '',
                phone: '',
                email: '',
                gender: 'm',
            },
            rules: {
                username: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 4, max: 18, message: '长度在 4 到 18 个字符', trigger: 'blur' }
                ],
                password: [
                    { validator: checkPwd, trigger: 'blur' }
                ],
                email: [
                    { validator: checkEmail, trigger: 'blur' }
                ],
                gender: [
                    { message: '请选择性别', trigger: 'blur' }
                ],
                phone: [
                    { validator: checkPhone, trigger: 'blur' }
                ]
            },
        }
    },
    created() {
        this.isLogin();
    },
    methods: {
        register(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    this.axios.post('/users/regist', this.addForm).then(() => {
                        this.$router.push({ name: 'Login' })
                    }).catch(() => { })
                } else {
                    this.$message.error('错了哦，请正确填写表单内容');
                }
            });
        },
        isLogin() {
            this.axios.get('/users/islogin').then((ret) => {
                let { data, error } = ret.data;
                if (data == 1) {
                    this.$router.push('/')
                    return;
                }
            }).catch(() => { })
        }
    }
}
</script>

<style lang="less" scoped>
@import "Login.less";
.login {
    #rightDiv {
        border-radius: 0 4px 4px 0;
        width: 255px;
        background: #f8f8f8;
        padding-left: 51px;
        p {
            width: 135px;
            height: 60px;
            line-height: 60px;
            color: #999;
            font-size: 12px;
            .loginBtn {
                display: inline-block;
                color: #37b5f9;
                cursor: pointer;
            }
        }
        .zc {
            display: block;
            text-decoration: none;
            width: 82px;
            height: 28px;
            line-height: 28px;
            margin-bottom: 12px;
            border-radius: 2px;
            padding-left: 51px;
            font-size: 14px;
            box-sizing: content-box;
            cursor: pointer;
             :hover {
                text-decoration: underline;
            }
        }
        .qq {
            border: 1px solid #37b5f9;
            color: #37b5f9;
            background: url(./zc_03.jpg) no-repeat 28px 7px #fff;
        }
        .wb {
            border: 1px solid #f26d7e;
            color: #f26d7e;
            background: url(./zc_10.jpg) no-repeat 28px 7px #fff;
        }
        .wx {
            border: 1px solid #00c800;
            color: #00c800;
            background: url(./zc_15.jpg) no-repeat 28px 7px #fff;
        }
    }
    .login-form {
        height: 500px;
        border-radius: 4px 0 0 4px;
        .el-select {
            display: block;
        }
    }
}
</style>

